import * as echarts from '../../../ec-canvas/echarts';

var api = require('../../../utils/api.js');
var $ = require('../../../utils/util.js'); 
var regeneratorRuntime = require('../../../utils/runtime.js')
var app = getApp();
var Store = app.Store
 
Page({
  data: { 
    list_data:[],//结果数据集
    ycdm: '', // 默认数据(相电流、线电压........)
    station: 0, // 站房
    ycxlm: '', // 设备
    isShowC: true, // 是否显示
    isShowKong: false, // 是否是空
    eqlist: [ // 设备列表
    ],
    eqIndex: 1, // 头部弹框的选择（第二层设备） --- 第一个是站房
    isShowPop: false, // 是否显示弹框 
    isShowTime: false, // 是否显示时间弹框
    timeType:0,//时间类型  0:开始时间   1:结束时间
    statusBarHeight:0, // 状态栏高度
    tabsList: ['三相电压不平衡','三相电流不平衡'], 
    tabsActive:0, // 多个菜单
    legend:['A相电压','B相电压','C相电压'],
    start_time:$.getCurrentDate().getFullDate()+' 00:00',
    end_time:$.getNextDay(Date.parse($.getCurrentDate().getFullDate()))+' 00:00',
    dzTab: 0, // 最值和时间
  },
  async onLoad(options) {  
    let { statusBarHeight } = app.data; // 手机状态栏高度 
    this.setData({
      statusBarHeight, 
    })  
    Store.dispatch({
      type: 'SET_FROM',
      form: {

      },
    })
 



    if ('station' in options){ 
      var zf_list = await app._selected() // 获取站房
      var sb_list = await app._selectYcxlm({ station: options.station }) // 参数传的是站房id
      this.setData({ 
        station: options.station, // 站房id
        eqlist:[
          { YCXLM: zf_list.data[0].list[0].dept_name, dept_id: zf_list.data[0].list[0].station }, //【这点需要验证是不是传的站房id 还是企业id】
          ...sb_list.data
        ]
      }) 
      this.setData({
        station:options.station,
        ycxlm:options.ycxlm,
        title:options.ycxlm,
      })
    }else{
      var zf_list = await app._selected() // 获取站房
      var sb_list = await app._selectYcxlm({ station: zf_list.data[0].list[0].station }) // 参数传的是站房id
      this.setData({ 
        station: zf_list.data[0].list[0].station, // 站房id
        eqlist:[
          { YCXLM: zf_list.data[0].list[0].dept_name, dept_id: zf_list.data[0].list[0].station }, //【这点需要验证是不是传的站房id 还是企业id】
          ...sb_list.data
        ]
      }) 
  
      this.setData({
        title: this.data.eqlist.length > 0 ? this.data.eqlist[1].YCXLM : '',
        ycxlm: this.data.eqlist.length > 0 ? this.data.eqlist[1].YCXLM : '',
      })
    }

   this.getUnbalanceData();


  },

  async onShow() { 
    var form = Store.getState().formInfor.form
    if (!form.selected) return
    var key = form.key
    switch (key) { 
      case 'selected': // 企业和站房列表接口 
        var sb_list = await app._selectYcxlm({ station: form.selected.station })// 获取设备列表  
        this.setData({
          title: sb_list.data[0].YCXLM,
          station: form.selected.station, // 站房id
           eqlist: [
             { YCXLM: form.selected.dept_name, dept_id: form.selected.station },//【这点需要验证是不是传的站房id 还是企业id】
            ...sb_list.data
          ]
        })
        this.getUnbalanceData();
        break
    }
    app._clearFromCache();
  },
    onPullDownRefresh: function () { // 下拉刷新
      this.getUnbalanceData();
  },
  onClosePop(){ // 关闭弹框
    this.setData({
      isShowPop: false
    }, () => {
      setTimeout(() => {
        this.setData({
          isShowC: true
        })
      }, 160)
    })
    this.getUnbalanceData();
  },
  popTabHandle(e){ // 设备
    var {index} = $.detail(e)
    this.setData({
      eqIndex: index,
      title: this.data.eqlist[index].YCXLM
    }) 
    this.onClosePop()
    this.getYxList();//获取遥信列表
  },
  toAllHandle(e){ 
    var { key } = e.detail 
    switch (key*1){
      case 1: // 选择站房
        this.setData({
          eqIndex: 1, // ---该需求了---
          isShowPop: false
        })
        var { type } = $.detail(e)
        Store.dispatch({
          type: 'SET_FROM',
          form: {
            key: 'selected', // 后台要的更改字段 
            type: 3, // 表单类型 1： radio  2：select 3:特殊的radio
            config: {

            },
          },
        })
        $.linkurl(`/pages/main/chooseForm/chooseForm`)
        break;
      case 2: // 设备
        if (this.data.isShowPop){
          this.onClosePop() // 关闭
        } else {
          this.setData({
            isShowPop: true,
            isShowC: false
          })
        }
        break; 
    } 
  },
  tabsHanlde(e){ // 多级菜单
    this.setData({
      tabsActive: e.detail.index,
    })
    if(this.data.tabsActive==0){
      this.setData({
        legend:['A相电压','B相电压','C相电压']
      })
    }else if(this.data.tabsActive==1){
      this.setData({
        legend:['A相电流','B相电流','C相电流']
      })
    }
   this.getUnbalanceData();
  },
  openTimeHandle(e) { // 打开时间弹框
   var type=$.detail(e).type;
    this.setData({
      isShowTime: true,
      isShowC: false,
      timeType: type ||0
    })
  },
  timeCloseHandle(){ // 时间弹框
    this.setData({
      isShowTime: false, 
    }, () => {
      setTimeout(() => {
        this.setData({
          isShowC: true
        })
      }, 160)
    })
  },
  dzTabHandle(e) { // 最大当前
    var { index } = $.detail(e)
    this.setData({
      dzTab: index
    })
  },
  timeConfirmHandle(e) { // 时间组件传出来的数据
    var { time, key } = e.detail 
    time=time.substring(0,16)
    var startTime= null;
    var endTime=null;
    console.log('timeType',this.data.timeType)
    console.log('time',time)
    console.log('time',Date.parse(time))
    console.log('start',Date.parse(this.data.start_time))
    console.log('end',Date.parse(this.data.end_time))
    if(this.data.timeType==0){//开始时间
      startTime= new Date(Date.parse(time));
      endTime=new Date(Date.parse(this.data.end_time));
    }else if (this.data.timeType==1){//结束时间
      startTime= new Date(Date.parse(this.data.start_time));
      endTime=new Date(Date.parse(time));
    }
    var tomorrow=new  Date(Date.parse($.getNextDay(Date.parse($.getCurrentDate().getFullDate()))+' 00:00')).getTime();
    console.log('tomorrow',tomorrow)
    if(startTime>tomorrow || endTime>tomorrow){
      $.toast('日期超前,请重新选择');
      return
    }
    if(startTime>endTime){
      $.toast('开始时间不能大于结束时间');
      return
    }else if(startTime.getTime()==endTime.getTime()){
      $.toast('开始时间不能与结束时间相同');
      return
    }else if(endTime.getTime()-startTime.getTime()>=30*24*60*60*1000){
      $.toast('请选择时间间隔在30天之内的日期');
      return
    }
    this.setData({
      [key]: time
    }) 
    this.getUnbalanceData();
  },
  init(chart,legend, data) {//电压 电流曲线图 初始化
    this.selectComponent('#mychart-dom-bar').init((canvas, width, height,dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr 
      });
      setOption(chart,legend,data);
      this[chart] = chart;
      return chart;
    });
  },
  init1(chart, data) {//三相不平衡图表 初始化
    this.selectComponent('#mychart-dom-bar1').init((canvas, width, height,dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr 
      });
      setOption1(chart,data);
      this[chart] = chart;
      return chart;
    });
  },
 async getUnbalanceData(){//获取电压 电流 三相不平衡 的数据
      var params={
        ycdm: this.data.tabsList[this.data.tabsActive]=='三相电压不平衡'?'相电压':'相电流', // 默认数据
        station: this.data.station, // 站房
        ycxlm: this.data.eqlist.length>1?this.data.eqlist[this.data.eqIndex].YCXLM:'', // 设备
        start_time: this.data.start_time,// 时间
        end_time:this.data.end_time
      }
      wx.showLoading();
      var that=this;
     await api.$get(api.main.unbalance, params).then((res) => {
        wx.hideLoading();
        that.setData({
          list_data: res.data,
        })
       
      })
      console.log(this.data.list_data)
      this.init('chart1',this.data.legend,this.data.list_data);
      this.init1('chart2',this.data.list_data);
  }
});
function setOption(chart,legend, data) { //电流电压权限  echart设置
  var unit='单位:'+data.MEASURING;
  var _cem = ($.getCurrentDate().getHour() * 60 + $.getCurrentDate().getMinute())/1435*100
  var _csm = _cem - 20 >0? _cem-20: 0  
  const option = {
    grid : {
      bottom:'25%'
    },
    tooltip : {
      trigger : 'axis',
      axisPointer : {
        type : 'cross'
      }
    },
    legend : {
      data : legend
    },
    xAxis : {
      type : 'category',
      boundaryGap : false,
      data : data.xList,
      axisLabel: {  
        rotate:-15,
        formatter:function(params){
          return params.substring(5);
        }
     } 
    },
    yAxis : {
      name : unit,
      type : 'value',
      max : 'dataMax',
      min : 'dataMin'
    },
    dataZoom: [
      {
        type: 'inside',
        start: _csm,
        end: _cem
      },
      {
        start: _csm,
        end: _cem,
        type: 'slider',
      }
    ],
    series : [ {
      name : legend[0],
      type : 'line',
      data : data.aList
    }, {
      name : legend[1],
      type : 'line',
      data : data.bList
    }, {
      name : legend[2],
      type : 'line',
      data : data.cList
    } ]
  }
  chart.setOption(option);
}
function setOption1(chart,data) { //三相不平衡 echarts设置
  var _cem = ($.getCurrentDate().getHour() * 60 + $.getCurrentDate().getMinute())/1435*100
  var _csm = _cem - 20 >0? _cem-20: 0  
  const option = {
          grid : {
            top:'15%',
            bottom:'25%'
          },
          color : [ 'blue' ],
          tooltip : {
            trigger : 'axis',
            axisPointer : {
              type : 'cross'
            }
          },
          legend : {
            data : [ data.type ]
          },
          toolbox : {
            show : true,
            x : 1200,
            feature : {
              magicType : {
                type : [ 'bar', 'line' ]
              }
            }
          },
          xAxis : {
            type : 'category',
            boundaryGap : false,
            data : data.xList,
            axisLabel: {  
              rotate:-15,
              formatter:function(params){
                return params.substring(5);
              }
           } 
          },
          yAxis : {
            name : '单位：%',
            type : 'value',
            max : data.warning
          },
          dataZoom: [
            {
              type: 'inside',
              start: _csm,
              end: _cem
            },
            {
              start: _csm,
              end: _cem,
              type: 'slider',
            }
          ],
          series : [ {
            name : data.type,
            type : 'line',
            data : data.list,
            markPoint : {
              data : [ {
                type : 'max',
                name : '最大值'
              } ]
            },
            markLine : {
              lineStyle : {
                normal : {
                  type : 'dashed',
                  color : 'red'
                }
              },
              data : [ {
                symbol : 'circle',
                label : {
                  position : 'end',
                  formatter : '告警'
                },
                yAxis : 15
              }, {
                symbol : 'circle',
                label : {
                  position : 'end',
                  formatter : '紧急'
                },
                yAxis : 30
              } ]
            }
          } ]
        }
  chart.setOption(option);
}